<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<link rel="stylesheet" type="text/css" href="../static/bootstrap-3.3.7-dist/css/bootstrap-theme.css"/>
		<link rel="stylesheet" type="text/css" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../static/css/iconfont.css"/>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="header1">
				<div class="header1_1">
					<div class="headerwork">
						<a href="" class="btn">你好！{{ username }}</a>
						<a href="/quit/" class="btn">退出登陆</a>
						<a href="/myorder/" class="btn">我的订单</a>
						<a href="/shopcar/" class="btn shopcar">
							<span class="iconfont icon-qicheqianlian-"></span>
							购物车
						</a>
					</div>
				</div>
			</div>
			<div class="header1_2">
				<!-- 图标 -->
				<div class="header-logo">
					
				</div>
				<!-- 导航栏 -->
				<div class="header-nav">
					<a href="/index/" class="nav_a1">商城</a>
					<a href="">笔记本</a>
					<a href="">平板</a>
					<a href="">手机</a>
					<a href="">无人机</a>
					<a href="">相机</a>
					<a href="">其他</a>
				</div>
				<!-- 搜索框 -->
                <form action="" method="post">
				<div class="header-search">
					<input class="inputsearch" type="" name="search_name" id="" value="" placeholder="手机"/>
                    <button style="outline: none" type="submit"class="btnsearch">
							<span class="iconfont icon-search "></span>
					</button>
				</div>
                </form>
			</div>
		</div>
		<!-- 轮播图 -->
		<div id="carousel-example-generic" class="carousel slide lunbotu" data-ride="carousel">
		  <!-- Indicators -->
		  <ol class="carousel-indicators">
		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			<li data-target="#carousel-example-generic" data-slide-to="3"></li>
			<li data-target="#carousel-example-generic" data-slide-to="4"></li>
		  </ol>
		
		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <a href=""><img src="../static/img/s1.png" alt="..."></a>
		    </div>
		    <div class="item">
			   <a href=""><img src="../static/img/s2.png" alt="..."></a>
		    </div>
		    <div class="item">
		      <a href=""><img src="../static/img/s3.png" alt="..."></a>
		    </div>
			<div class="item">
			  <a href=""><img src="../static/img/s4.png" alt="..."></a>
			</div>
			<div class="item">
			  <a href=""><img src="../static/img/s5.png" alt="..."></a>
			</div>
		  </div>
		  <!-- Controls -->
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>
		<!-- 轮播图下面的四个小方块 -->
		<div class="lunbotu_list">
			<a href=""><img src="../static/img/l1.png" ></a>
			<a href=""><img src="../static/img/l2.png" ></a>
			<a href=""><img src="../static/img/l3.png" ></a>
			<a href=""><img src="../static/img/l1.png" ></a>
		</div>
		<!-- 主页面 -->	
		<div class="page-main"> 
			<!-- 手机 -->
			<div class="phone">
				<div class="phonebanner">					
				</div>
				<div class="phonetitle">
					笔记本
					<a class="readmore" href="" >查看全部<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
				<div class="phonelist">
					<div class="phonelist1">
						<a href=""><img src="../static/img/laptop.png" ></a>
					</div>
					<div class="phonelist2">
						{% for laptop in all_laptop%}
							<div class="phone ">
								<a href="/good/?pk={{ laptop.Merch_id  }}">
									<img class="pic" src="//{{ laptop.Merch_img }}" >
									<p class="name", style="font-size: 10px">{{ laptop.Merch_name }}</p>……
									<p class="price">{{laptop.Merch_price}}元起</p>
								</a>
							</div>	
						{% endfor %}
					</div>
				</div>
			</div>
			<!--华为 -->
			<div class="appmodule">
				<div class="appbanner">
					
				</div>
				<div class="apptitle">
					平板
					<a class="readmore" href="" >查看全部<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>

				<div class="applist">
                    {% for ipad in all_ipad%}
					<div class="app">
						<a href="/good/?pk={{ ipad.Merch_id  }}">
							<img class="pic" src="//{{ ipad.Merch_img }}" alt="">
							<p class="name", style="font-size: 10px">{{ipad.Merch_name}}</p>……
							<p class="price">{{ipad.Merch_price}}元</p>
						</a>
					</div>
                    {% endfor %}
				</div>

			</div>	
			<!-- 配件 -->
			<div class="partsmodule">
				<div class="partsbanner"></div>
				<div class="partstitle">
					手机
					<a class="readmore" href="" >查看全部<span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
				<div class="partslist">
                    {% for oppo in all_phone%}
					<div class="app">
						<a href="/good/?pk={{ oppo.Merch_id  }}">
							<img class="pic" src="//{{ oppo.Merch_img }}" alt="">
							<p class="name", style="font-size: 10px">{{ oppo.Merch_name }}</p>……
							<p class="price">{{oppo.Merch_price}}元</p>
						</a>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
        <footer>
            <br/><br/>
       <div class="text-center">UICshop</div>
       <div class="text-center">Copyright | 2019-2021 Group24</div>
       <div class="text-center"><a href=" ">回到顶部</a></div>
            <br/><br/>
      </footer>
		<script src="../static/js/jquery.js"></script>
		<script src="../static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	</body>
</html>
